<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>jquery ui</title>
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/style.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
</head>

<body>

<div id="elem">颜色动画</div>
<button id="toggle">改变颜色</button>

    <div id="baiye"></div>
    <button id="baiye2">百叶窗</button>

    <div id="bounce"></div>
    <button id="bounce2">反弹</button>

    <div id="scale"></div>
    <button id="scale2">scale</button>

    <div id="size"></div>
    <button id="size2">size</button>

    <div id="switchClass" class="switchClass big"></div>
    <button id="switchClass2">switchClass</button>
    <div id="resizable">resizable</div>
    <div>
      <ul id="selectable">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
      </ul>
    </div>
    <div> 
    <p>可排序小部件</p>
      <ul id="sortable">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
      </ul>
    </div>

    <div id="targetElement">
      <div class="positionDiv" id="position1"></div>
      <div class="positionDiv" id="position2"></div>
      <div class="positionDiv" id="position3"></div>
      <div class="positionDiv" id="position4"></div>
    </div>


    <div id="one" class="select2"></div>
    <div id="two" class="select2"></div>
    <div id="three" class="select2"></div>

    <script src="js/main.js"></script>
</body>

</html>